<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>css样式</title>
		<style>
			body {
				margin: 0px;
			}
			
			div {
				margin: 20px auto;
				width: 100px;
				height: 75px;
				background-color: red;
				border: 1px solid black;
			}
			
			.tranMe {
				transform: rotate(-30deg);
				-ms-transform: rotate(-30deg);
				/* IE 9 */
				-webkit-transform: rotate(-30deg);
				/* Safari and Chrome */
			}
			
			.tranMe:hover {
				/*顺时针转动**/
				transform: rotate(30deg);
				-ms-transform: rotate(30deg);
				/* IE 9 */
				-webkit-transform: rotate(30deg);
				/**扩大：x轴扩大之前的2倍大小；y轴扩大之前的3倍大小*/
				/* Safari and Chrome */
				-ms-transform: scale(2, 3);
				/* IE 9 */
				-webkit-transform: scale(2, 3);
				/* Safari */
				transform: scale(2, 3);
				/* 标准语法 */
				/**2d倾斜：x轴倾斜的角度；y轴倾斜的角度*/
				transform: skew(30deg, 20deg);
				-ms-transform: skew(30deg, 20deg);
				/* IE 9 */
				-webkit-transform: skew(30deg, 20deg);
				/* Safari and Chrome */
				/*平移:x轴和y轴方向的移动**/
				transform: translate(0px, 100px);
				-ms-transform: translate(0px, 100px);
				/* IE 9 */
				-webkit-transform: translate(0px, 100px);
				/* Safari and Chrome */
			}
			#div3 {
				/**过渡：时间长度*/
				transition: width 4s;
				-webkit-transition: width 4s;
				/* Safari */
			}
			#div3:hover{
				width: 300px;
			}
			
			#div4 {
				-webkit-transition: width 2s, height 2s, -webkit-transform 2s;
				/* For Safari 3.1 to 6.0 */
				transition: width 2s linear 1s, height 2s  linear 1s, transform 2s linear 1s;
			}
			
			#div4:hover{
				width: 300px;
				height: 225px;
				-webkit-transform: rotate(720deg); /* Chrome, Safari, Opera */
    			transform: rotate(720deg);
			}
			
			#div5:hover{
				/*mymove:关键帧定义**/
				animation:mymove 5s infinite;
				-webkit-animation:mymove 5s infinite; /* Safari and Chrome */
			}
			
			/*定义关键帧：
			 如果只有开始和结束：则可以使用 from 和 to 表示；
			 如果有多种状态，可以使用百分比；
			 0%：表示开始状态；
			 XX%：表示中间状态；
			 100%：表示结束状态
			 * **/
			@keyframes mymove {
				/*开始状态**/
				from {
					background: red;
				}
				/*结束状态**/
				to {
					background: yellow;
				}
			}
			
			/* Safari and Chrome */
			@-webkit-keyframes mymove
			
			{
				from {
					background: red;
				}
				to {
					background: yellow;
				}
			}		</style>
	</head>

	<body>

		<div>你好。这是一个 DIV 元素。</div>

		<div id="div2" class="tranMe">你好。这是一个 DIV 元素。</div>

		<div id="div3">你好。这是一个 DIV 元素。</div>
		
		<div id="div4">你好。这是一个 DIV 元素。</div>
		
		<div id="div5">你好。这是一个 DIV 元素。</div>

	</body>

</html>